{% extends "xhs/layout.html" %}

{% block title %}小红书数据管理系统 - 数据导入{% endblock %}

{% block page_title %}数据导入{% endblock %}

{% block content %}
<div class="row">
    <div class="col-lg-8 offset-lg-2">
        <div class="card">
            <div class="card-header">
                <i class="fas fa-file-import text-primary"></i> 导入小红书数据
            </div>
            <div class="card-body">
                <form method="post" action="/import" enctype="multipart/form-data">
                    <div class="form-group">
                        <label for="file">选择要导入的JSON文件</label>
                        <div class="custom-file">
                            <input type="file" class="custom-file-input" id="file" name="file" accept=".json" required>
                            <label class="custom-file-label" for="file">选择文件...</label>
                        </div>
                        <small class="form-text text-muted">支持导入含有collection_tasks, notes, comments, users, locations集合的JSON文件</small>
                    </div>
                    
                    <div class="alert alert-info">
                        <h5><i class="fas fa-info-circle"></i> 导入说明</h5>
                        <p>导入过程中请注意以下事项：</p>
                        <ul>
                            <li>支持从本系统导出的标准格式JSON文件</li>
                            <li>导入数据会自动合并已有数据，对于相同ID/URL的数据会进行更新</li>
                            <li>导入过程可能需要一定时间，请耐心等待</li>
                            <li>如果文件较大，可能会超时，建议分批导入</li>
                        </ul>
                    </div>
                    
                    <div class="alert alert-warning">
                        <i class="fas fa-exclamation-triangle"></i> 请确保导入的数据格式正确，避免损坏现有数据
                    </div>
                    
                    <div class="text-center mt-4">
                        <button type="submit" class="btn btn-primary btn-lg">
                            <i class="fas fa-upload"></i> 开始导入
                        </button>
                    </div>
                </form>
            </div>
        </div>
        
        <div class="card mt-4">
            <div class="card-header">
                <i class="fas fa-code text-secondary"></i> 数据格式示例
            </div>
            <div class="card-body">
                <pre class="bg-light p-3"><code>{
  "collection_tasks": [
    {
      "task_id": 1,
      "keyword": "旅行",
      "start_time": "2023-01-01 12:00:00",
      "status": "完成"
    }
  ],
  "notes": [
    {
      "note_id": 1,
      "title": "五一北京三日游",
      "author": "旅行家",
      "content": "这是一篇关于北京旅行的笔记...",
      "likes": 120,
      "collects": 45
    }
  ],
  "comments": [
    {
      "comment_id": 1,
      "note_id": 1,
      "user_id": "user123",
      "user_name": "小明",
      "comment_text": "这篇笔记写得真好！",
      "likes": 5
    }
  ],
  "users": [
    {
      "user_id": "user123",
      "user_name": "小明",
      "gender": "男",
      "location": "北京"
    }
  ],
  "locations": [
    {
      "location_id": 1,
      "location_name": "北京",
      "province": "北京",
      "city": "北京",
      "count": 10
    }
  ]
}</code></pre>
            </div>
        </div>
    </div>
</div>
{% endblock %}

{% block scripts %}
<script>
    // 自定义文件输入框显示文件名
    $('.custom-file-input').on('change', function() {
        var fileName = $(this).val().split('\\').pop();
        $(this).next('.custom-file-label').html(fileName);
    });
</script>
{% endblock %} 